<template>
  <!--   行为分类及显示   -->
  <div class="rule-box">
    <div v-if="$route.query.name || $route.query.id" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container" style="padding: 0 !important; height: 100%">
      <el-row :gutter="20" class="full-row">
        <!--行为树-->
        <el-col :span="4" :xs="24" class="full-height">
          <div class="head-container">
            <el-tree
              ref="tree"
              highlight-current
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="id"
              :default-expanded-keys="expandedKeys"
              @node-click="handleNodeClick"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span class="el-tree-node_box" :title="node.label">{{ node.label }}</span>
                <span v-if="data.parentId == '0'">{{ data.total }}</span>
              </span>
            </el-tree>
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="20" :xs="24" class="flex-container" style="padding: 20px; height: 100%">
          <el-form
            v-show="showSearch"
            ref="queryForm"
            :model="queryParams"
            size="small"
            :inline="true"
            label-width="100px"
          >
            <div>元数据定义</div>
          </el-form>
          <hk-table
            :loading="loading"
            :table-data="tableData"
            :table-columns="tableFieldList"
            :total="total"
            :show-pag="true"
            :operate="false"
            :show-index="true"
            :table-height="100"
            :query-params="queryParams"
            @changePage="changePage"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import HkTable from '@/components/Hk-Table/index.vue'
import { getLeftTree, getTableList } from '@/api/icp/behavior'

export default {
  name: 'User',
  components: { HkTable },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 部门树选项
      deptOptions: undefined,
      // 表单参数
      form: {},
      defaultProps: {
        children: 'children',
        label: 'fieldAlias'
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        nodeId: undefined
      },
      //   列表数据配置
      tableData: [],
      tableFieldList: [
        { label: '名称', param: 'fieldName' },
        { label: '说明', param: 'fieldAlias' },
        { label: '类型', param: 'fieldType' },
        { label: '备注', param: 'remark' }
      ],
      expandedKeys: ['1']
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.getTreeselect()
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true
      this.queryParams.scrollToTop = true
      getTableList(this.queryParams).then((res) => {
        this.total = res.total
        this.tableData = res.list
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      getLeftTree().then((res) => {
        this.deptOptions = res
        this.$nextTick(() => {
          if (this.$route.query && this.$route.query.id) {
            this.expandedKeys = ['1']
            this.$refs.tree.setCurrentKey(this.$route.query.id)
            this.handleNodeClick({ id: this.$route.query.id })
          }
        })
      })
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.nodeId = data.id
      this.queryParams.current = 1
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /**  分页*/
    changePage(data) {
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.full-row {
  height: 100%;
  margin: 0px !important;

  .full-height {
    padding: 20px !important;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    overflow: auto;
  }
  .flex-container {
    display: flex;
    flex-direction: column;
    .targetTable {
      flex: 1;
      // overflow: auto;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
